<style lang="scss">
  @import './home.scss';

</style>
<style type="text/css">
  .ga-side-bar.service{bottom:240rpx;opacity: 0}
</style>

<template>
  <div class="ga-container">
    <div class="ga-index">
      <!--返回顶部按钮-->
      <div class="ga-side-bar top" @click="returnTop"></div>
      <!-- <div class="ga-side-bar home" @click="returnTop"></div>
      <div class="ga-side-bar service">
        <contact-button  session-from="sid" size="27" type="default-light">
            </contact-button>
      </div> -->
      <!--弹窗 欢迎广告-->
      <div v-show="modal" v-if="adlist.eject.length>0">
        <div class="ga-mask animated fadeIn"  @click="modal=false"></div>

        <div class="ga-alert">
          <a class="img-box animated" :class="{'zoomIn' : modal}" :href="'../shopDetail/main?id='+adlist.eject[0].goods_id">
            <image class="img" mode="widthFix" :src="adlist.eject[0].icon"></image>
          </a>
          <p class="txt-center mt20" @click="modal=false">
            <icon type="cancel" class="weui-flex__item" color="#fff" size="30"/>
          </p>
        </div>
      </div>
      <!--tab-->
      <!-- <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
          <view class="tab">
            <view class="tab-nav" >
                      <view
                        v-for="(item,index) in tabList"
                        @click="selecteTab(index)" :key="index"
                        :tabindex="index"
                        style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;"
                        :class="[index>4 ?'' : tab-hide]">{{item.name}}
                      </view>
              <view >
                  <view
                    class="tab-line"
                    :style="[{width:(100/showTabNum)+'%;',transform:'translateX('+(100*sltTab)+'%);'}]">
                    </view>
              </view>
            </view>
          </view>
      </scroll-view> -->
      <!-- tab -->
      <!-- 顶部swiper -->
      <div>
        <swiper
          :indicator-dots="swiper.indicatorDots"
          :autoplay="swiper.autoplay"
          :interval="swiper.interval"
          :duration="swiper.duration"
          indicator-color="white"
          indicator-active-color="#ff3a35">
          <block v-for="(item,index) in adlist.banner"  :key="index">
            <swiper-item @click="bindNavigateTo('../shopDetail/main?id=' +item.goods_id)">
              <image :src="item.icon" class="slide-image" width="355" height="150"/>
            </swiper-item>
          </block>
        </swiper>
      </div>

      <!-- 导航栏 -->
      <div class="menu-box clear">

        <a :href="item.url" class="item" v-for="(item,index) in menuItems" :key="index">
          <img class="img" :src="item.icon" >
          <p>{{item.text}}</p>
        </a>
      </div>
      <!--公告-->
      <block v-for="(item,index) in adlist.notice" :key="index">
      <h1 class="h1">
        <span class="f24 gOrange"> {{item.name}}</span>
        <span class="f24 gOrange"> </span>
      </h1>
      <div class="recommend-lists">
        <a  class="item" :href="'../shopDetail/main?id='+item.goods_id">
          <img mode="widthFix" class="img" :src="item.icon" alt="">
        </a>
      </div>
      </block>
      <!--团购-->
      <h1 class="h1">
        <span class="f24 gOrange">最新团购 </span>
        <span class="f24 gOrange"> 包邮</span>
      </h1>
      <ul class="ga-group-list ga-media-list">
        <li v-for="(item,key) in grouplist" :key="index" v-if="key<2">
          <a class="item" :href="'/pages/shopgroup/main?id='+item.seid">
            <div class="item-media">
              <image class="img-box" mode="aspectFill" :src="item.icon"></image>
            </div>
            <div class="item-inner">
              <p class="title">{{item.title}}</p>
              <p class="p1">结束时间：{{item.end}}</p>
              <p class="p2">已团 <span>{{item.group_num}}</span>件</p>
              <p class="p3">单独购买 <span>¥{{item.shop_price}}</span></p>
              <p class="p4">
                {{item.buy_num}}人团
                ¥ <span>{{item.price}}</span>
              </p>
              <div class="btn primary">去拼团 <span class="icon-angle-right f26"></span></div>
            </div>
          </a>
        </li>
      </ul>

      <!--店长推荐-->
      <h2 class="h2">
        <span>店长推荐</span>
      </h2>
      <div class="recommend-lists">
        <a :href="'../shopDetail/main?id='+item.goods_id" class="item" v-for="(item,index) in adlist.recommend" :key="index">
          <img mode="widthFix" class="img" :src="item.icon" alt="">
        </a>
      </div>

      <!--砍价-->
      <!-- <h2 class="h2 gCell">
        <span>砍价免费拿</span>
        <router-link class="link" to="#">
          更多
          <i class="icon-angle-right"></i>
        </router-link>
      </h2>
      <ul class="ga-bargain-list">
        <li class="item" v-for="(item,index) in bargainItems" :key="index">
          <a href="#">
            <image class="img-box" mode="aspectFill" src="http://ga-1255639017.file.myqcloud.com/images/test/ads1.jpg"></image>
            <div class="con-box">
              <p class="p1">{{item.title}}</p>
              <p class="p2">1744人已0元拿</p>
              <p class="p3">原价 ¥52.9</p>
              <div class="btn primary">砍价0元得</div>
            </div>
          </a>
        </li>
      </ul> -->

      <!--最新到货-->
      <h2 class="h2 gCell">
        <span>最新到货</span>
        <a class="link" @click="bindSwitchTab('../proNew/main')">
          更多
          <i class="icon-angle-right"></i>
        </a>
      </h2>
      <ul class="ga-newest-list ga-media-list">
        <li v-for="(item,index) in new_goods" :key="index">
          <a class="item" :href="'/pages/shopDetail/main?id='+item.id">
            <div class="item-media">
              <image class="img-box" mode="aspectFill" :src="item.icon"></image>
            </div>
            <div class="item-inner">
              <p class="title">{{item.goods_name}}</p>
              <p class="p1"></p>
              <p class="p2"><span>¥{{item.market_price}}</span> ¥{{item.shop_price}}</p>
              <div class="cart"></div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {isLogin} from '@/utils/handleLogin'
export default {
  data () {
    return {
      adlist: {
         recommend: [],
         eject: [],
         banner: [],
         notice: []
      },
      grouplist:[],
      new_goods: [],
      page: 1,
      showTabNum: 5,
      sltTab: 0,
      tabList: [],
      modal: true,
      swiper: {
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 1000
      },
      menuItems: [
        {
          icon: 'http://ga-1255639017.file.myqcloud.com/images/home/a_img1.png',
          text: '好友拼团',
          url: '/pages/proGroup/main'
        },
        {
        //   icon: 'http://ga-1255639017.file.myqcloud.com/images/home/a_img2.png',
        //   text: '大刀砍价',
        //   url: ''
        // }, {
          icon: 'http://ga-1255639017.file.myqcloud.com/images/home/a_img3.png',
          text: '限时秒杀',
          url: '/pages/proSpike/main'
        }, {
          icon: 'http://ga-1255639017.file.myqcloud.com/images/home/a_img4.png',
          text: '新鲜预售',
          url: '/pages/proFresh/main'
          // url: ''
        }, {
          icon: 'http://ga-1255639017.file.myqcloud.com/images/home/a_img5.png',
          text: '第二盒半价',
          url: '/pages/proHalf/main'
          // url: ''
        }, {
          icon: 'http://ga-1255639017.file.myqcloud.com/images/home/a_img6.png',
          text: '热销排行',
          url: '/pages/proHot/main'
        }, {
          icon: 'http://ga-1255639017.file.myqcloud.com/images/home/a_img7.png',
          text: '领券中心',
          url: '/pages/tickets/main'
        }, {
        //   icon: 'http://ga-1255639017.file.myqcloud.com/images/home/a_img8.png',
        //   text: '分享有礼',
        //   // url: '../share/main'
        //   url: ''
        // }, {
          icon: 'http://ga-1255639017.file.myqcloud.com/images/home/a_img9.png',
          text: '分销申请',
          url: '/pages/distributionApply/main'
        }, {
          icon: 'http://ga-1255639017.file.myqcloud.com/images/home/a_img10.png',
          text: '附近的店',
          url: '../nearbyShop/main'
        }
      ],
      bargainItems: [
        {
          img: 'http://img.taopic.com/uploads/allimg/120505/154512-12050515193823.jpg',
          title: '牛油果'
        },
        {
          img: 'http://img.taopic.com/uploads/allimg/120505/154512-12050515193823.jpg',
          title: '牛油果'
        },
        {
          img: 'http://img.taopic.com/uploads/allimg/120505/154512-12050515193823.jpg',
          title: '牛油果'
        }
      ]
    }
  },
  methods: {
    /** 接口数据 */
    async load () {
      /*商品分类*/
      this.$_util.ajax.get('https://guo-a.com/mapi/product/categorylist').then((res) => {
        if(res.code === 200){
          this.tabList = res.data
        }
      })
      /*团购商品*/
      this.$_util.ajax.get('https://guo-a.com/mapi/group/goodslist').then((res) => {
         if(res.code === 200){
           this.grouplist = res.data
         }
      })
      this.$_util.ajax.get('https://guo-a.com/mapi/ad/adlist?sid=' + this.$store.state.sid).then((res) => {
        console.log(res)
          if(res.code === 200){
              if(res.data.hasOwnProperty('recommend')){
                this.adlist.recommend = res.data.recommend
              }
              if(res.data.hasOwnProperty('eject')){
                this.adlist.eject = res.data.eject
              }
              if(res.data.hasOwnProperty('banner')){
                this.adlist.banner = res.data.banner
              }
              if(res.data.hasOwnProperty('notice')){
                this.adlist.notice = res.data.notice
              }
          }
       })
    },
    async getprolist () {
        /*最近商品*/
        let params = {
            page:this.page,
            sort: 'newest',
            sorttype: 'desc',
        }
        this.$_util.ajax.get('https://guo-a.com/mapi/product/productlist',params).then((res) =>{
            if(res.code === 200){
                let lists=res.data;
                let pages=Math.ceil( parseInt(res.total) / 10);
                if(this.page <= pages){
                    this.page++
                    this.new_goods=this.new_goods.concat(lists);
                }else {
                    wx.showToast({
                        title: '没有更多数据了',
                        icon: 'none'
                    })
                }
            }
        })
    },

    selecteTab (id) {
      this.sltTab = id
    },
    /*返回顶部*/
    returnTop () {
      wx.pageScrollTo({
        scrollTop: 0
      })
    },
    /**
     * 路由跳转
     */
    bindNavigateTo (url) {
        wx.navigateTo({
          url: url
        })
    },
    /**
     * 跳转到TAB页
     */
    bindSwitchTab (url) {
        wx.switchTab({
          url
        })
    }
  },
  /*上拉加载更多*/
  onReachBottom () {
      this.getprolist()
  },
  created () {
     this.load()

  },
  mounted () {
      this.getprolist()
  },
  onShow() {
  },
  onLoad: function(options){
    if(options.hasOwnProperty('scene')){
      var scene = decodeURIComponent(options.scene)
      this.$store.commit('storeUpdateShareToken',scene)
     
    }
  }
}
/**========================分         割         线==================
 *                             _ooOoo_
 *                            o8888888o
 *                            88" . "88
 *                            (| -_- |)
 *                            O\  =  /O
 *                         ____/`---'\____
 *                       .'  \\|     |//  `.
 *                      /  \\|||  :  |||//  \
 *                     /  _||||| -:- |||||-  \
 *                     |   | \\\  -  /// |   |
 *                     | \_|  ''\---/''  |   |
 *                     \  .-\__  `-`  ___/-. /
 *                   ___`. .'  /--.--\  `. . __
 *                ."" '<  `.___\_<|>_/___.'  >'"".
 *               | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *               \  \ `-.   \_ __\ /__ _/   .-` /  /
 *          ======`-.____`-.___\_____/___.-`____.-'======
 *                             `=---='
 *          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 *                         永无BUG 专用签名
*/
</script>
<style>
  @import "../../styles/animate.css";
</style>

